/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view v-if="endTime">
		<view class="goods">
			<navigator class="goods-pic" role="navigation">
				<image class="wh100" :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ treamActive.goods_id+'&width=400&height=400'"
				 role="img"></image>
			</navigator>
			<view class="goods-cont">
				<view class="goods-name">{{treamActive.goods_name}}</view>
				<view class="goods-num">{{found.join}}人拼单·已拼{{treamActive.sales_sum+treamActive.virtual_num}}件</view>
				<view class="goods-price">
					<text>
						￥{{filter(found.price)}}
					</text>
					省{{found.cut_price}}元
				</view>
			</view>
		</view>
		<view class="service">
			<view>
				<image :src="imgUrl+'common/ico-check-red1.png'" role="img"></image>
				全场包邮
			</view>
			<view>
				<image :src="imgUrl+'common/ico-check-red1.png'" role="img"></image>
				7天退货
			</view>
			<view>
				<image :src="imgUrl+'common/ico-check-red1.png'" role="img"></image>
				48小时内发货
			</view>
			<view>
				<image :src="imgUrl+'common/ico-check-red1.png'" role="img"></image>
				假一陪十
			</view>
		</view>
		<view class="team">
			<view class="team-list">
				<view class="master">
					<view class="team-pic">
						<image class="wh100" :src="found.head_pic" role="img"></image>
					</view>
					<view class="team-master">拼主</view>
				</view>
			</view>
			<view class="team-num" v-if="btn_status==1||btn_status==2||btn_status==3">
				仅剩
				<text class="co-red">
					{{found.surplus}}
				</text>
				个名额，
				<text class="timer">
					{{endTime}}
				</text>
				后结束
			</view>
			<button class="join-groups" open-type="share" role="button" aria-disabled="false" v-if="btn_status==1">
				邀请好友拼单

			</button>
			<view v-if="btn_status != 1 && btn_status !=3 && btn_status !=2" class="team-full team-num" @tap="openSpecModel">
				<info-icon type="info" color="#ffab33" size="20"></info-icon>{{teamInfo.msg}}
			</view>
			<view v-if="btn_status == 0 || btn_status ==3" class="join-groups" @tap="openSpecModel">{{teamInfo.btnText}}
			</view>
			<view v-if="btn_status != 0 && btn_status != 1 && btn_status !=3 " class="join-groups" @tap="openSpecModel">{{teamInfo.btnText}}
			</view>
		</view>
		<view class="team-tips">
			<text>
				拼单须知
			</text>
			<text class="team-des">
				好友拼单 · 人满发货 · 人不满退货
			</text>
		</view>
		<view class="nav">
			<navigator open-type="switchTab" url="/pages/index/index" role="navigation">
				<image :src="imgUrl+'common/pic-sy.png'" role="img"></image>
				<view>首页</view>
			</navigator>
			<navigator url="/pages/activity/seckill_list/seckill_list" role="navigation">
				<image :src="imgUrl+'common/pic-ms.png'" role="img"></image>
				<view>秒杀</view>
			</navigator>
			<navigator role="navigation">
				<image :src="imgUrl+'common/pic-qc.png'" role="img"></image>
				<view>清仓</view>
			</navigator>
			<navigator url="/pages/activity/group_list/group_list" role="navigation">
				<image :src="imgUrl+'common/pic-tg.png'" role="img"></image>
				<view>团购</view>
			</navigator>
		</view>
		<view class="goods-list">
			<block v-for="(item,index) in order">
				<navigator :url="'/pages/team/team_info/team_info?goods_id='+item.goods_id+'&item_id='+item.item_id+'&team_id='+item.team_id"
				 role="navigation">
					<image :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType" role="img"></image>
					<view class="item-goods-name ellipsis-2">{{item.goods_name}}</view>
					<view class="item-goods-num">
						<text class="co-red">
							￥{{filter(item.team_price)}}
						</text>
						<text>
							已拼{{item.sales_sum+item.virtual_num}}件
						</text>
					</view>
				</navigator>
			</block>

		</view>
		<!-- 规格弹框  -->
		<view :hidden="openSpecModalActive">
		    <view class="cover-layer" @tap="closeSpecModal"></view>
		    <view class="spec-model">
		     <closeicon @click="closeSpecModal" class="modal-close" color="gray" size="22" type="close" role="img"></closeicon>
		       <view class="spec-goods">
		            <image class="wh100 spec-img" :src="goodsInfo.original_img"></image>
		            <view class="spec-goods-info">
		                <view class="spec-goods-name">{{goodsInfo.goods_name}}</view>
		                <view  class="spec-goods-price">￥
						
						{{skuInfo?skuInfo.shop_price:goodsInfo.shop_price}}
						({{treamInfo.needer}}人团) </view>
		                <view class="spec-goods-price">￥{{skuInfo?skuInfo.cost_price:goodsInfo.market_price}} </view>
		                <view class="spec-goods-stock">剩余库存：{{skuInfo?skuInfo.store_count:goodsInfo.store_count}}</view>
		            </view>
		        </view>
		        <view class="spec-name">数量</view>
		       <view class="count">
		       	<view @tap="subCartNum" class="sub">-</view>
		       	<input @blur="inputCartNum" v-model="goodsInputNum" type="number"  >
		       	</input>
		       	<view @tap="addCartNum" class="add">+</view>
		       </view>
			   <view class="spec-box">
		        <block v-for="(item,n) in specification" :key="n">
		        	<view>
						<view class="spec-name">{{item.name}}</view>
						<block v-for="(item,index) in item.spec_item_list" >
							
							<view @tap="selectSpec(item.id,n,$event,index)" class="spec-btn " :class="[subIndex[n]==index?'spec-btn-click':'']"  :data-id="item.id" :data-index="n" >{{item.item}}</view>
						</block>
					</view>
		        	
		        </block>
				</view>
		        <view class="spec-cart-btn " :class="[skuInfo.prom_id<=0||skuInfo.store_count<=0 ? 'spec-cart-disable':'']" @tap="buyNow">发起拼团</view>
		    </view>
		</view>
	</view>
</template>

<script>
	import closeicon from "@/components/uni-icons/uni-icons.vue";
	import common from "@/common/common.js"
	import config from "@/api/config.js";
	import {
		getTreamFoundInfo,
		getTreamActive,
		getTreamList,
		getTreamFollows,
		getSku,
		getPrice,
		getSpecification,
		getGoodsInfo,
		postTreamOrder,
		getSystemTime,
		getTreamInfo,
		getTreamFound
	} from "@/api/api.js";
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				hostUrl: config.host, //图片路径前缀
				imgUrl:config.imgUrl,
				found: "", //拼主信息
				treamActive: "", //拼团活动信息
				openSpecModalActive: true, //是否打开规格弹窗
				skuInfo: "", //sku里面的价格
				endTime: "",
				 subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				order: "",
				goodsInfo: "", //商品信息
				goods_id: "",
				total: "", //条数
				pricePlan: "", //价格方案
				itemId:"",//sku中的item_id
				goodsAttr: [], //商品规格参数
				selectArr:[],//存放被选中的值
				treamInfo: "", //拼团商品信息
				goodsInputNum: 1, //选中的商品数
				specification: "", //规格
				startTime:"",//拼团开始时间
				select: { //选择的商品规格参数
					keyName:"",//规格名
					
				},
				teamInfo: {
					msg: "",
					btnText: "",
				},
				btn_status: 0,
				params: {
					size: 10,
				},
				teamFollow: "",
				options: {},
				timer:null

			};
		},
		components: {
			closeicon
		},
		computed: {
			...mapState(['imgType','goodsImgHeight','goodsImgWidth'])
		},
		onLoad(options) {
			console.log(options)
			let params = {};
			if (options.foundId) {
				this.options.found_id = options.foundId
			}
			if (options.order_id) {
				this.options.order_id = options.order_id
			}
		},
		onShow() {
			if (this.options.found_id) {
				this.getTreamFoundInfo(this.options)
			}
			if (this.options.order_id) {
				this.getTreamFoundInfo(this.options)
			}
		},
		destroyed() { //销毁定时器
			clearInterval(this.timer);
		},
		methods: {
			/*拼主信息*/
			getTreamFoundInfo(params) {
				getTreamFoundInfo(params).then(res => {
					if (res) {
						console.log(res)
						this.found = res
						this.getTreamActive(res.team_id)
						this.countdown()
						this.getTreamList(this.params)
						this._getTreamInfo(res.team_id)
						this.getSystemTime()
						let params = {
							found_id: res.found_id,
							order_id: res.order_id
						}
						this.getTreamFollows(params)
						let loginInfo = uni.getStorageSync('loginInfo').user_id;
						let uid = loginInfo ? loginInfo : 0;

						if (res.status == 0) {
							this.teamInfo.msg = "待开团"
							this.teamInfo.btnText = "一键发起拼单"
							this.btn_status = 0

						} else if (res.status == 1) {
							/*拼主自己进入*/


							if (uid == res.user_id) {
								this.teamInfo.msg = ""
								this.teamInfo.btnText = "邀请好友拼单"
								this.btn_status = 1
								console.log("邀请好友")
							} else {
								/*好友进入*/
								var status = true;
								// this.teamFollow.forEach((i,index)=>{
								// 	if(i.found_user_id==uid){
								// 		status=true
								// 	}

								// })

								if (status == false) {
									this.teamInfo.msg = ""
									this.teamInfo.btnText = "已参与拼单"
									this.btn_status = 2
								} else {
									this.teamInfo.msg = "参与拼单"
									this.teamInfo.btnText = "一键参与拼单"
									this.btn_status = 3

								}
							}

						} else if (res.status == 2) {
							this.teamInfo.msg = "拼单已满"
							this.teamInfo.btnText = "一键发起拼单"
							this.btn_status = 4
						} else {
							this.teamInfo.msg = "拼单失败"
							this.teamInfo.btnText = "一键发起拼单"
							this.btn_status = 5
						}
					}
					// console.log(res)
				})
			},
			/*请求拼团信息*/
			_getTreamInfo(id) {
				getTreamInfo(id).then(res => {
					if (res) {
						this.treamInfo = res;
						// this.getGoodsImg(res.goods_id);
						// this.getGoodsInfo(res.goods_id);
						// this.getStore(res.store_id);
						// this.getGoodsAttr(res.goods_id);
						// this._getCommentStatistics(res.goods_id);
						// this.getSystemTime()
						// this.countdown()
						/*拼团列表*/
						let found={
							"p":1,
							"status":1,
							"team_id":res.team_id
						}
						this.getTreamFound(found)
						this._getPrice(this.goods_id)
					}
					console.log(res)
				})
			},
			// 拼主分页(拼团)
			getTreamFound(params)	{
				getTreamFound(params).then(res=>{
					console.log(res)
				})
			},
			getTreamFollows(params) {
				getTreamFollows(params).then(res => {
					if (res) {
						console.log(res)
						this.teamFollow = res;
					}
				})
			},
			/*拼团主体信息*/
			getTreamActive(params) {
				getTreamActive(params).then(res => {
					if (res) {
						this.treamActive = res
						this.goods_id = res.goods_id;
						
						
						
					}
					console.log(res)

				})
			},
			//推荐商品
			getTreamList(params) {
				getTreamList(params).then(res => {
					if (res) {
						this.order = res.records;
						this.total = res.total;
					}
					console.log(res)
				})
			},
			/*关闭*/
			closeSpecModal() {
				this.openSpecModalActive = true
			},
			/*参团*/
			openSpecModel() {
				console.log(1)
				this.getGoodsInfo(this.treamActive.goods_id);
				this.openSpecModalActive = false;
			},
			getGoodsInfo(params) {
				getGoodsInfo(params).then(res => {
					console.log(res)
					if (res) {
						this.goodsInfo = res;
						this.goodsInfo.goods_content = res.goods_content.replace(/<img/gi, "<img style='width:100%'");
						this._getPrice(res.goods_id)
					}

				})
			},
			_getSpecification(id) { //获取规格先要判断 getPrice是否返回数据
				getSpecification(id).then(res => {
					console.log(res)
					this.specification = res;
				})
			},
			_getPrice(id) {
				getPrice(id).then(res => {
					console.log(res)
					if (res.length > 0) {
						this.pricePlan = res;
						this._getSpecification(this.goods_id);
					} else {
						var params = {
							id: this.treamActive.goods_id,
							isTeam: true,
							itemId: ""
						}
						this.getSku(params)
					}

				})
			},
			getSku(params) { //获取规格参数
				getSku(params).then(res => {
					console.log(res)
					/*规格有可能是0*/
					if (res) {

						this.skuInfo = res;
						// this.itemId=res.item_id;
						// this.prom_type=res.prom_type

						// var price = res.shop_price;
						// 	price=price.toFixed(2)
						// let priceArr = price.split(".");
						// this.price = priceArr;
					}

				})
			},
			selectSpec(item,n,event,index){//选择规格
				var self=this;
				console.log(item)
				if (self.selectArr[n] != item) {
					self.selectArr[n] = item;
					self.subIndex[n] = index;
				} else {
					self.selectArr[n] = "";
					self.subIndex[n] = -1;
				}
				self.checkItem()
				
				// console.log(self.selectArr.length)
				var result1="";
				if(self.selectArr.length>1){
					var resultArr=[]
					this.selectArr.forEach((i,ind)=>{
						resultArr.push(JSON.stringify(i))
						resultArr=resultArr.reverse()
					})
					result1=resultArr.join("_")
				}else{
					// var result2=JSON.stringify(item)
					var resultArr=[]
					this.selectArr.forEach((i,ind)=>{
						resultArr.push(JSON.stringify(i))
					})
					result1=resultArr;
				}
				this.pricePlan.forEach((i,ind)=>{
						// console.log(i.key)
					if(i.key!=result1){//不相等 有可能是倒序了  
						var resultArr=[];
						resultArr=result1.toString().split("_");
						result1=resultArr.reverse();
						result1=result1.join("_")
					}	
					if(i.key==result1){
						
						console.log(result1,i.item_id,i.key_name)
						this.pricePlan.item_id=i.item_id;
						this.select.keyName=i.key_name;
						console.log("等于",ind)
						var params={
							id:this.goods_id,
							isTeam:true,
							itemId:this.pricePlan.item_id
						}
						this.getSku(params)
					}
				})
			},
			checkItem: function() {
				var self = this;
				var option = self.specification;
				var result = []; //定义数组存储被选中的值
				for (var i in option) {
					result[i] = self.selectArr[i] ? self.selectArr[i] : '';
				}
				for (var i in option) {
					var last = result[i]; //把选中的值存放到字符串last去
					for (var k in option[i].list) {
						result[i] = option[i].list[k].name; //赋值，存在直接覆盖，不存在往里面添加name值

					}

					result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
				}

				self.$forceUpdate(); //重绘
			},
			onReachBottom() { //下拉加载数据
				// console.log("滚动加载")
				if (this.order.length === this.total) {
					// uni.showToast({
					//     title: '加载完了',
					//     duration: 2000
					// });
					common.toast("none", "加载完了", 2000)
					return false;
				}
				this.params.size += 9;
				this._getTreamList(this.params);

			},
			addCartNum() { //数量
				if (this.goodsInputNum < this.skuInfo.store_count) { //小于库存
					this.goodsInputNum++
				}
				if (this.goodsInputNum > this.skuInfo.limit_num) {
					this.goodsInputNum = this.skuInfo.limit_num
					let msg = `单次购买不能超过${this.skuInfo.limit_num}`
					common.toast("none", msg, 2000)
					return
				}

			},
			inputCartNum() {
				/*输入数>库存数 =库存数*/
				if (this.goodsInputNum > this.skuInfo.store_count && this.goodsInputNum > this.skuInfo.limit_num) {
					this.goodsInputNum = this.skuInfo.limit_num
					let msg = `单次购买不能超过${this.skuInfo.limit_num}`
					common.toast("none", msg, 2000)
					return
				}
				if (this.inputCartNum <= 0) {
					this.inputCartNum = 1
				}

			},
			subCartNum() { //减
				if (this.goodsInputNum > 1) {
					this.goodsInputNum--;
				}
			},
			postTreamOrder(params) {
				postTreamOrder(params).then(res => {
					console.log(res)
					if (res.status == 1) {
						let order_sn = res.result.order_list[0].order_sn
						// this.openSpecModalActive = true
						uni.navigateTo({
							url: `/pages/team/team_confirm/team_confirm?order=${order_sn}`
						})
					}
				})
			},
			/*发起拼团*/
			buyNow() {
				let loginInfo = uni.getStorageSync('loginInfo') || null //登录信息
				if (loginInfo != null) {
					var that = this;
					let params = {
						"found_id": that.found.found_id,
						"goods_id": that.goods_id,
						"goods_num": that.goodsInputNum,
						"item_id": that.skuInfo.item_id,
						"team_id": that.treamInfo.team_id
					}
					that.postTreamOrder(params)
				} else {
					common.islogin()
				}

			},
			/*分享*/
			onShareAppMessage(res) {
				let that = this;
				let title = that.treamActive.share_title;
				let img = that.hostUrl + '/mall/goods/thumb_image?goods_id=' + that.treamActive.goods_id + '&width=400&height=400';
				let path = '/pages/team/team_detail/team_detail?foundId=' + that.found.found_id;
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				return {
					title: title,
					img: img,
					path: path
				}
			},
			countdown() {
				clearInterval(this.timer);
				this.timer = setInterval(this.createTime, 1000)

			},
			timeFormat(param) { //小于10的格式化函数
				return param < 10 ? '0' + param : param;
			},
			/*获取系统信息*/ 
			getSystemTime(){
				getSystemTime().then(res=>{
					console.log(res)
					this.startTime=res
					
				})
			},
			createTime() {
				// var startTime = parseInt(new Date().getTime() / 1000) 
				// this.getSystemTime()
				var startTime= this.startTime++;
				// console.log(startTime)
				var foundTime = this.found.found_end_time;
				var difftime = parseInt(foundTime - startTime)

				let objTime;
				if (difftime > 0) {

					let hou = parseInt(difftime % (60 * 60 * 24) / 3600);
					let min = parseInt(difftime % (60 * 60 * 24) % 3600 / 60);
					let sec = parseInt(difftime % (60 * 60 * 24) % 3600 % 60);
					objTime = `${this.timeFormat(hou)}:${this.timeFormat(min)}:${this.timeFormat(sec)}`
				} else {
					objTime = `00:00:00`
				}
				this.endTime = objTime

			},
			/*保留两位小数*/
			filter(e) {
				let num = parseFloat(e).toFixed(2)
				return num;
			},

		}
	}
</script>

<style lang="scss">
	/* team_detail.wxss */
	.goods {
		display: flex;
		justify-content: space-between;
		padding: 16rpx 20rpx;
		background-color: #fff;
	}

	.goods-pic {
		width: 258rpx;
		height: 258rpx;
	}

	.goods-name {
		width: 420rpx;
		color: #666;
		font-size: 30rpx;
		line-height: 38rpx;
		max-height: 152rpx;
		overflow: hidden;
	}

	.goods-num {
		margin-top: 12rpx;
		height: 36rpx;
		line-height: 36rpx;
		font-size: 26rpx;
		color: #aaa;
		overflow: hidden;
	}

	.goods-price {
		margin-top: 12rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 26rpx;
		color: #999;
		overflow: hidden;
	}

	.goods-price>text {
		color: #ff3b3b;
		font-size: 30rpx;
		font-weight: bold;
		margin-right: 16rpx;
	}

	.service {
		height: 24rpx;
		padding: 24rpx 0;
		display: flex;
		justify-content: space-around;
		font-size: 24rpx;
		line-height: 1;
		color: #999;
	}

	.service image {
		width: 24rpx;
		height: 24rpx;
		vertical-align: top;
	}

	.team {
		background: #fff;
		padding: 30rpx 0 10rpx;
		border-bottom: 2rpx solid #f3f3f3;
	}

	.team-list {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding-top: 20rpx;
		max-height: 176rpx;
		overflow: hidden;
	}

	.team-list>view {
		margin: 0 10rpx;
	}

	.team-pic {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.master {
		position: relative;
		width: 80rpx;
		height: 80rpx;
		border: 4rpx solid #ffab33;
		border-radius: 50%;
	}

	.master .team-pic {
		width: 80rpx;
		height: 80rpx;
	}

	.team-master {
		position: absolute;
		top: -10rpx;
		left: -10rpx;
		background-color: #ffab33;
		font-size: 22rpx;
		line-height: 28rpx;
		padding: 0 10rpx;
		border-radius: 14rpx;
		color: #fff;
	}

	.team-num {
		margin: 24rpx 0 12rpx;
		text-align: center;
		font-size: 30rpx;
		line-height: 48rpx;
		color: #666;
	}

	.timer {
		font-weight: bold;
		color: #333;
	}

	.team-full>icon {
		vertical-align: top;
	}

	.join-groups {
		margin: 0 auto 30rpx;
		width: 700rpx;
		line-height: 84rpx;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		background-color: #e02e24;
		border-radius: 10rpx;
	}

	.team-tips {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		line-height: 84rpx;
		font-size: 24rpx;
		background-color: #fff;
		color: #666;
	}

	.team-des {
		color: #999;
	}

	.nav {
		display: flex;
		margin-top: 12rpx;
		height: 100rpx;
		padding: 22rpx 0 14rpx;
		background-color: #fff;
	}

	.nav>navigator {
		width: 25%;
		text-align: center;
	}

	.nav image {
		width: 50rpx;
		height: 50rpx;
	}

	.nav view {
		font-size: 30rpx;
		line-height: 34rpx;
		color: #666;
	}

	.goods-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.goods-list>navigator {
		margin-top: 4rpx;
		width: 373rpx;
		background-color: #fff;
	}

	.goods-list image {
		width: 373rpx;
		height: 373rpx;
	}

	.item-goods-name {
		margin: 8rpx 0;
		padding: 0 16rpx;
		font-size: 30rpx;
		height: 84rpx;
		line-height: 42rpx;
		color: #666;
	}

	.item-goods-num {
		display: flex;
		justify-content: space-between;
		padding: 0 16rpx;
		line-height: 48rpx;
		padding-bottom: 18rpx;
		font-size: 24rpx;
		color: #999;
	}

	.item-goods-num .co-red {
		font-size: 30rpx;
		font-weight: bold;
	}

	/* 规格弹框 */
	.spec-model {
		position: fixed;
		bottom: 0;
		z-index: 20;
		background: white;
		width: 100%;
		padding: 0 30rpx;
		font-size: 32rpx;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	.spec-goods {
		padding: 15rpx 0 30rpx;
		float: left;
		width: 100%;
		border-bottom: 1px solid #f3f3f3;
	}

	.spec-img {
		float: left;
		height: 150rpx;
		width: 150rpx;
		margin-top: 16rpx;
	}

	.spec-goods-info {
		float: left;
		padding: 0 25rpx;
		width: 490rpx;
	}

	.spec-goods-name {
		font-size: 30rpx;
		line-height: 35rpx;
		max-height: 70rpx;
		margin: 15rpx 20rpx 20rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.spec-goods-price {
		color: #ff3b3b;
		font-size: 30rpx;
		font-weight: bold;
	}

	.spec-goods-stock {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #999999;
	}

	.spec-name {
		clear: both;
		padding: 20rpx 0;
		font-size: 30rpx;
	}

	.count {
		width: 184rpx;
		height: 50rpx;
		border: 1rpx solid #f3f3f3;
		font-size: 28rpx;
	}

	.count>view,
	.count>input {
		float: left;
		width: 60rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.sub {
		border-right: 1px solid #f3f3f3;
	}

	.add {
		border-left: 1px solid #f3f3f3;
	}

	.spec-cart-btn {
		margin: 120rpx 0 0 -30rpx;
		padding: 30rpx;
		width: 100%;
		font-size: 30rpx;
		text-align: center;
		color: #fff;
		background-color: #ff3b3b;
	}

	.spec-add-cart {
		background-color: #ffb03f;
	}

	.spec-buy {
		background-color: #ff3b3b;
		margin-left: 34rpx;
	}

	.spec-cart-disable {
		background: #bbbbbb;
	}

	.spec-cart-btn-lg {
		width: 614rpx;
	}

	.spec-btn {
		color: black;
		background-color: white;
		padding: 10rpx 10rpx;
		font-size: 26rpx;
		line-height: 28rpx;
		float: left;
		border: 1rpx solid #f3f3f3;
		margin: 4rpx 10rpx 4rpx 0;
		border-radius: 4rpx;
	}

	.spec-btn-click {
		color: white;
		background-color: #ff3b3b;
		border: 1rpx solid
	}
</style>
